<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ACE Editor Height Adjustment</title>
    <script src="./script/ace.js" type="text/javascript" charset="utf-8"></script>
    <script src="./script/mode-javascript.js" type="text/javascript" charset="utf-8"></script>
    <style>
        #editor {
            width: 800px;
            border: 1px solid #ccc;
        }
        /* 设置自定义行高 */
        .ace_line {
            line-height: 20px;
        }
    </style>
</head>
<body>
    <div id="editor" style="min-height:20px;max-height: 1000px;width: 80%">Your initial content goes here...</div>
<!--    <script>-->
<!--        // 初始化编辑器-->
<!--        var editor = ace.edit("editor");-->
<!--        editor.setTheme("ace/theme/github");-->
<!--        editor.session.setMode("ace/mode/javascript");-->
<!--        // 添加一些示例代码-->
<!--        editor.setValue(`function example() {-->
<!--    if (true) {-->
<!--        console.log("This is a sample function.");-->
<!--        for (var i = 0; i < 10; i++) {-->
<!--            console.log(i);-->
<!--        }-->
<!--    } else {-->
<!--        console.log("No operation.");-->
<!--    }-->
<!--}-->
<!--example();`);-->
<!--        // 获取编辑器中的行高-->
<!--        editor.renderer.lineHeight = 20;-->
<!--        var lineHeight = editor.renderer.lineHeight;-->

<!--        // 获取编辑器中的总行数-->
<!--        var lineCount = editor.session.getLength();-->

<!--        // 根据行高和行数计算编辑器的总高度-->
<!--        var editorHeight = lineCount * lineHeight;-->

<!--        console.log(editorHeight);-->
<!--        // 设置编辑器的高度-->
<!--        document.getElementById('editor').style.height = editorHeight + 'px';-->

<!--        // 通知编辑器大小已改变-->
<!--        editor.resize();-->
<!--    </script>-->
    <script>
        // 初始化编辑器
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/github");
        editor.session.setMode("ace/mode/javascript");
        editor.renderer.lineHeight = 20;
        // 函数：根据行号调整编辑器高度
        function adjustEditorHeight() {
            var lineHeight = editor.renderer.lineHeight;
            var lineCount = editor.session.getLength();
            var editorHeight = lineCount * lineHeight;
            document.getElementById('editor').style.height = editorHeight + 'px';
            editor.resize();
        }

        // 调整初始高度
        adjustEditorHeight();

        // 监听编辑器内容变化事件，动态调整高度
        editor.session.on('change', function() {
            adjustEditorHeight();
        });
    </script>

</body>
</html>
